.content-main {
  border: 1px solid var(--boder-color);
  background-color: #fff;
  display: flex;
  .left-contet {
    width: 70%;
    border-right: 1px solid var(--boder-color);
  }
  .right-content {
    width: 30%;
  }
}
body {
  background-color: var(--bg-color);
}

.new-song {
  padding: 0;
  header {
    display: flex;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 10px;
    margin: 0 20px;
    div {
      margin-right: 10px;
      padding-right: 10px;
      border-right: 1px solid #ccc;
      cursor: pointer;
      font-size: 16px;
      color: #666;
      line-height: 20px;
      &:last-child {
        border-right: none;
      }
    }
    div.active {
      // color: #000;
      font-weight: 600;
      color: #000;
    }
    margin-bottom: 20px;
  }
  .wrap {
    // width: calc(100% - 100px);
  }
  .content {
    padding-left: 20px;
  }
  .list-item {
    display: flex;
    margin-bottom: 20px;
    // padding-left: 20px;
    cursor: pointer;
    &:hover {
      background-color: #eee;
    }
    //
    .pic {
      width: 60px;
      height: 60px;
      margin-right: 10px;
      img {
        width: 100%;
        border-radius: 6px;
      }
    }
    .desc {
      width: calc(100% - 60px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      h3 {
        font-size: 14px;
      }
      div {
        font-size: 12px;
        color: var(--text-color-6);
      }
    }
  }
}

@media (max-width: 900px) {
  .content-main {
    border: 1px solid var(--boder-color);
    background-color: #fff;
    display: block;
    .left-contet {
      width: 100%;
    }
    .right-content {
      width: 100%;
    }
  }
}
